<template>
  <div class="LevelTable">
    <div class="title">内容管理-公共字段管理-执业类型分类添加一级列表</div>
    <div class="UserAg_bg">
      <div class="box">
        <div class="Practitop">
          <el-input v-model="input" size="small" class="search" placeholder="请输入名称"></el-input>
          <el-button size="small" class="Prabtn" type="primary">查询</el-button>
          <el-button size="small" class="Prabtn" type="primary">重置</el-button>
        </div>
        <div class="icon_font">
          <div class="el-icon-circle-plus-outline" @click.prevent="addRow()"></div>
          <div class="el-icon-delete" @click.prevent="delData()"></div>
        </div>
      </div>
      <div class="table">
        <el-table
          :header-cell-style="{background:'rgba(247,249,252,.5)',color:'#1F2E4D',}"
          class="tabheader"
          @selection-change="selectRow"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="编号" type="index" width="180"></el-table-column>
          <el-table-column prop="Advertising" label="名称" width="180">
            <template slot-scope="scope">
              <input type="text" v-model="scope.row.value" v-if="isInp==true" class="linpName">
              <div v-if="isInp==false">{{scope.row.content}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="title" align="center" label="排序" width="190">
            <template slot-scope="scope">
              <input type="text" value="1" v-if="isInp==true" class="linp">
              <div v-if="isInp==false">{{scope.row.num}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button class="tableBtn" size="mini" @click="handleEdit()">{{msg}}</el-button>
              <el-button class="tableBtn" size="mini" @click="toTableT(scope.row.id)">添加二级列表</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LevelTable',
  data() {
    return {
      input: '',
      tableData: [],
      msg: '编辑',
      isInp: false, //编辑后改为  确定
      selectlistRow: []
    }
  },
  methods: {
    initData() {
      if (this.$route.query.id == '') return false
      this.id = this.$route.query.id.toString()
      this.lAxios({
        method: 'post',
        url: '/platform/selectStaticData.do',
        params: {
          state: this.id
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.data[this.id]
      })
    },

    handleEdit() {
      if (this.msg == '编辑') {
        this.isInp = true
        this.msg = '确定'
      } else {
        this.isInp = false
        this.msg = '编辑'
      }
    },
    toTableT(id) {
      this.$router.push({ path: '/PracticeList', query: { id: id } })
    },
    // 增加行
    addRow() {
      var list = {
        rowNum: '',
        Advertising: this.Advertising,
        title: this.title
      }
      this.tableData.unshift(list)
    },
    // 删除方法
    // 删除选中行
    delData() {
      for (let i = 0; i < this.selectlistRow.length; i++) {
        let val = this.selectlistRow
        // 获取选中行的索引的方法
        // 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
        // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
        val.forEach((val, index) => {
          this.tableData.forEach((v, i) => {
            if (val.rowNum === v.rowNum) {
              // i 为选中的索引
              this.tableData.splice(i, 1)
            }
          })
        })
      }
      // 删除完数据之后清除勾选框
      this.$refs.tableData.clearSelection()
    },
    //table事件
    selectRow(val) {
      this.selectlistRow = val
      console.log(this.selectlistRow)
    }
  },
  mounted() {
    this.initData()
  }
}
</script>

<style lang="scss" scoped>
.LevelTable {
  width: 100%;
  height: 100vh;
  margin-left: 10px;
  background-color: #f7f9fc;
  font-size: 12px;
}
.title {
  height: 33px;
  line-height: 33px;
}

.UserAg_bg {
  width: 100%;
  height: 600px;
  background-color: white;
}
.Practitop {
  padding-top: 27px;
  margin-left: 25px;
}
.search {
  width: 239px;
}
.Prabtn {
  width: 49px;
  height: 32px;
  background-color: #3377ff;
  margin-right: 25px;
}
.box {
  display: flex;
  flex-direction: row;
}
.icon_font {
  font-size: 22px;
  padding-top: 27px;
  margin-left: 20px;
}
.icon_font > div:nth-child(1) {
  /*color: #199ed8;*/
  margin-right: 30px;
}
.table {
  width: 96%;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid #f7f7f7;
  margin-top: 27px;
}
.tableBtn {
  width: 140px;
  height: 39px;
  font-size: 14px;
  color: #3377ff;
}

.linp {
  width: 25px;
  height: 25px;
  text-align: center;
}
.linpName {
  width: 140px;
  height: 25px;
}
</style>
